<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        事件：动作触发函数执行
        事件三要素
            1.事件源
            2.事件名称
            3.执行函数
        事件名称：
            鼠标事件：
            onclick()         单击 
            onmouseover()     移入
            onmouseout()      移出
            onmousemove()     移动
            ondblclick()      双击
            oncontextmenu()   右键
        键盘事件：
            onkeydowm         键盘按下
            onkeyup           键盘松开
            onkeyress         键盘按下并松开
        HTML文档事件：
            onload            加载事件
            onerror           加载错误事件
            onresize          改变大小

            onblur            失去焦点
            onfocus           获取焦点
            onchange          输入框 或select值变化的时候
            onselect          选择文本

        事件绑定方式：
            1.行内绑定
                在标签里面有一个onclick属性，属性里面写javascript代码
            2.元素对象绑定 on
                同一事件只能绑定一个
            3.事件监听
                可以绑定多个同一事件，事件的执行顺序是  先绑定先执行  //有兼容性问题
     -->
    

        <div onclick="javascript:alert('这是行内的绑定')">
            第一种行内绑定元素对象方法
        </div>
        <div onclick="clickdiv()">
            这是第二种行内元素对象方法
        </div>
        <button>元素对象绑定</button>
        <a href="#">监听事件绑定</a>

        <script>
            // 事件绑定的兼容处理 element 事件源 eventName事件名称  fn是一个回调函数
            function bindEvent(element,eventName,fn)
            {
                if(element,addEventListener)
                {
                    element.addEventListener(eventName,fn)
                }else if(element.attachEvent)  //IE 6-8
                {
                    element.attachEvent('on'+eventName,fn)
                }else{
                    element['on'+eventName]=fn
                }
            }
        </script>
        
        <script>
            function clickdiv()
            {
                alert("这是第二种方法的div被点击了")
            }
        </script>
        <script>
            var btn=document.querySelector("button")
            btn.onclick=function()
            {
                alert("这是元素对象的绑定")
            }
            
            var a=document.querySelector("a")
            a.addEventListener('click',function(){
                alert("这个是第一种方法的事件监听方法")
            })
            a.addEventListener('click',function(){
                alert("这是监听事件方法的第二个事件")
            })
        </script>
</body>
</html>